<template>
  <div class="app">
    <div>
      <img alt="D3js logo" height="50" src="../assets/d3js.png">
    </div>
    <div class="box_relative">
      <img alt="Vue logo" height="100" src="../assets/logo.png">
    </div>
    <h1>Welcome to demos using d3 in your Vue app</h1>
    <p>
      Following demos are figures rendered by d3.js integrated in Vue,<br />
      check more original d3 figures from 
      <a href="https://observablehq.com/@d3/" target="_blank" rel="noopener">observablehq</a>
    </p>

    <h3>GLANCE:</h3>
    <KgRelationMap :d3Data="d3Data" name="relationMap"></KgRelationMap>

    <h3 style="margin: 0 0 0;">MORE:</h3>
    <div class="search-box">
      <el-input
        class="search"
        size="large"
        v-model="keyword"
        clearable
        placeholder="Please input search keyword"
      ></el-input>
    </div>

    <div class="listing-grid">
      <div v-for="(item, index) in list" :key="index">
        <div max-width:300em>
          <a :aria-label='item' tabindex="-1" :href=figureDetailList[item].link>
            <div class="small-pic-item hover-small-pic-item" :style=figureDetailList[item].bg></div>
          </a>
          <div>
            <a class="subtitle-pic-item hover-subtitle-pic-item" :href=figureDetailList[item].link>
              <span :title='item'>{{item}}</span>
            </a>
          </div>
        </div>
      </div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="footer">
      <p>
      Since 2020/9/30 
      <a href="https://gitee.com/sima_daoke" target="_blank" rel="noopener">@sima_daoke</a>
    </p>
    </div>
  </div>
</template>

<script>
import KgRelationMap from "./KgRelationMap";

export default {
  components: {
    KgRelationMap,
  },
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      keyword: '',
      figureList : [
        'figure1',
        'figure2',
        'figure3',
        'figure4',
      ],
      figureDetailList: {
        'figure1': {link: "/#/p-kg-relation-map", bg: {backgroundImage: "url(" + require("@/assets/d3imgs_small/1.jpg") + ")"}},
        'figure2': {link: "/#/todo", bg: {backgroundImage: "url(" + require("@/assets/d3imgs_small/2.jpg") + ")"}},
        'figure3': {link: "/#/todo", bg: {backgroundImage: "url(" + require("@/assets/d3imgs_small/3.jpg") + ")"}},
        'figure4': {link: "/#/todo", bg: {backgroundImage: "url(" + require("@/assets/d3imgs_small/4.jpg") + ")"}},
      },
      d3Data: {
        nodes: [
          { id: "Myriel", group: 1 },
          { id: "Napoleon", group: 1 },
          { id: "Mlle.Baptistine", group: 1 },
          { id: "Mme.Magloire", group: 1 },
          { id: "CountessdeLo", group: 1 },
          { id: "Geborand", group: 1 },
          { id: "Champtercier", group: 1 },
          { id: "Cravatte", group: 1 },
          { id: "Count", group: 1 },
          { id: "OldMan", group: 1 },
          { id: "Labarre", group: 2 },
          { id: "Valjean", group: 2 },
          { id: "Marguerite", group: 3 },
          { id: "Mme.deR", group: 2 },
          { id: "Isabeau", group: 2 },
          { id: "Gervais", group: 2 },
          { id: "Tholomyes", group: 3 },
          { id: "Listolier", group: 3 },
          { id: "Fameuil", group: 3 },
          { id: "Blacheville", group: 3 },
          { id: "Favourite", group: 3 },
          { id: "Dahlia", group: 3 },
          { id: "Zephine", group: 3 },
          { id: "Fantine", group: 3 },
          { id: "Mme.Thenardier", group: 4 },
          { id: "Thenardier", group: 4 },
          { id: "Cosette", group: 5 },
          { id: "Javert", group: 4 },
          { id: "Fauchelevent", group: 0 },
          { id: "Bamatabois", group: 2 },
          { id: "Perpetue", group: 3 },
          { id: "Simplice", group: 2 },
          { id: "Scaufflaire", group: 2 },
          { id: "Woman1", group: 2 },
          { id: "Judge", group: 2 },
          { id: "Champmathieu", group: 2 },
          { id: "Brevet", group: 2 },
          { id: "Chenildieu", group: 2 },
          { id: "Cochepaille", group: 2 },
          { id: "Pontmercy", group: 4 },
          { id: "Boulatruelle", group: 6 },
          { id: "Eponine", group: 4 },
          { id: "Anzelma", group: 4 },
          { id: "Woman2", group: 5 },
          { id: "MotherInnocent", group: 0 },
          { id: "Gribier", group: 0 },
          { id: "Jondrette", group: 7 },
          { id: "Mme.Burgon", group: 7 },
          { id: "Gavroche", group: 8 },
          { id: "Gillenormand", group: 5 },
          { id: "Magnon", group: 5 },
          { id: "Mlle.Gillenormand", group: 5 },
          { id: "Mme.Pontmercy", group: 5 },
          { id: "Mlle.Vaubois", group: 5 },
          { id: "Lt.Gillenormand", group: 5 },
          { id: "Marius", group: 8 },
          { id: "BaronessT", group: 5 },
          { id: "Mabeuf", group: 8 },
          { id: "Enjolras", group: 8 },
          { id: "Combeferre", group: 8 },
          { id: "Prouvaire", group: 8 },
          { id: "Feuilly", group: 8 },
          { id: "Courfeyrac", group: 8 },
          { id: "Bahorel", group: 8 },
          { id: "Bossuet", group: 8 },
          { id: "Joly", group: 8 },
          { id: "Grantaire", group: 8 },
          { id: "MotherPlutarch", group: 9 },
          { id: "Gueulemer", group: 4 },
          { id: "Babet", group: 4 },
          { id: "Claquesous", group: 4 },
          { id: "Montparnasse", group: 4 },
          { id: "Toussaint", group: 5 },
          { id: "Child1", group: 10 },
          { id: "Child2", group: 10 },
          { id: "Brujon", group: 4 },
          { id: "Mme.Hucheloup", group: 8 },
        ],
        links: [
          { source: "Napoleon", target: "Myriel", value: 1 },
          { source: "Mlle.Baptistine", target: "Myriel", value: 8 },
          { source: "Mme.Magloire", target: "Myriel", value: 10 },
          { source: "Mme.Magloire", target: "Mlle.Baptistine", value: 6 },
          { source: "CountessdeLo", target: "Myriel", value: 1 },
          { source: "Geborand", target: "Myriel", value: 1 },
          { source: "Champtercier", target: "Myriel", value: 1 },
          { source: "Cravatte", target: "Myriel", value: 1 },
          { source: "Count", target: "Myriel", value: 2 },
          { source: "OldMan", target: "Myriel", value: 1 },
          { source: "Valjean", target: "Labarre", value: 1 },
          { source: "Valjean", target: "Mme.Magloire", value: 3 },
          { source: "Valjean", target: "Mlle.Baptistine", value: 3 },
          { source: "Valjean", target: "Myriel", value: 5 },
          { source: "Marguerite", target: "Valjean", value: 1 },
          { source: "Mme.deR", target: "Valjean", value: 1 },
          { source: "Isabeau", target: "Valjean", value: 1 },
          { source: "Gervais", target: "Valjean", value: 1 },
          { source: "Listolier", target: "Tholomyes", value: 4 },
          { source: "Fameuil", target: "Tholomyes", value: 4 },
          { source: "Fameuil", target: "Listolier", value: 4 },
          { source: "Blacheville", target: "Tholomyes", value: 4 },
          { source: "Blacheville", target: "Listolier", value: 4 },
          { source: "Blacheville", target: "Fameuil", value: 4 },
          { source: "Favourite", target: "Tholomyes", value: 3 },
          { source: "Favourite", target: "Listolier", value: 3 },
          { source: "Favourite", target: "Fameuil", value: 3 },
          { source: "Favourite", target: "Blacheville", value: 4 },
          { source: "Dahlia", target: "Tholomyes", value: 3 },
          { source: "Dahlia", target: "Listolier", value: 3 },
          { source: "Dahlia", target: "Fameuil", value: 3 },
          { source: "Dahlia", target: "Blacheville", value: 3 },
          { source: "Dahlia", target: "Favourite", value: 5 },
          { source: "Zephine", target: "Tholomyes", value: 3 },
          { source: "Zephine", target: "Listolier", value: 3 },
          { source: "Zephine", target: "Fameuil", value: 3 },
          { source: "Zephine", target: "Blacheville", value: 3 },
          { source: "Zephine", target: "Favourite", value: 4 },
          { source: "Zephine", target: "Dahlia", value: 4 },
          { source: "Fantine", target: "Tholomyes", value: 3 },
          { source: "Fantine", target: "Listolier", value: 3 },
          { source: "Fantine", target: "Fameuil", value: 3 },
          { source: "Fantine", target: "Blacheville", value: 3 },
          { source: "Fantine", target: "Favourite", value: 4 },
          { source: "Fantine", target: "Dahlia", value: 4 },
          { source: "Fantine", target: "Zephine", value: 4 },
          { source: "Fantine", target: "Marguerite", value: 2 },
          { source: "Fantine", target: "Valjean", value: 9 },
          { source: "Mme.Thenardier", target: "Fantine", value: 2 },
          { source: "Mme.Thenardier", target: "Valjean", value: 7 },
          { source: "Thenardier", target: "Mme.Thenardier", value: 13 },
          { source: "Thenardier", target: "Fantine", value: 1 },
          { source: "Thenardier", target: "Valjean", value: 12 },
          { source: "Cosette", target: "Mme.Thenardier", value: 4 },
          { source: "Cosette", target: "Valjean", value: 31 },
          { source: "Cosette", target: "Tholomyes", value: 1 },
          { source: "Cosette", target: "Thenardier", value: 1 },
          { source: "Javert", target: "Valjean", value: 17 },
          { source: "Javert", target: "Fantine", value: 5 },
          { source: "Javert", target: "Thenardier", value: 5 },
          { source: "Javert", target: "Mme.Thenardier", value: 1 },
          { source: "Javert", target: "Cosette", value: 1 },
          { source: "Fauchelevent", target: "Valjean", value: 8 },
          { source: "Fauchelevent", target: "Javert", value: 1 },
          { source: "Bamatabois", target: "Fantine", value: 1 },
          { source: "Bamatabois", target: "Javert", value: 1 },
          { source: "Bamatabois", target: "Valjean", value: 2 },
          { source: "Perpetue", target: "Fantine", value: 1 },
          { source: "Simplice", target: "Perpetue", value: 2 },
          { source: "Simplice", target: "Valjean", value: 3 },
          { source: "Simplice", target: "Fantine", value: 2 },
          { source: "Simplice", target: "Javert", value: 1 },
          { source: "Scaufflaire", target: "Valjean", value: 1 },
          { source: "Woman1", target: "Valjean", value: 2 },
          { source: "Woman1", target: "Javert", value: 1 },
          { source: "Judge", target: "Valjean", value: 3 },
          { source: "Judge", target: "Bamatabois", value: 2 },
          { source: "Champmathieu", target: "Valjean", value: 3 },
          { source: "Champmathieu", target: "Judge", value: 3 },
          { source: "Champmathieu", target: "Bamatabois", value: 2 },
          { source: "Brevet", target: "Judge", value: 2 },
          { source: "Brevet", target: "Champmathieu", value: 2 },
          { source: "Brevet", target: "Valjean", value: 2 },
          { source: "Brevet", target: "Bamatabois", value: 1 },
          { source: "Chenildieu", target: "Judge", value: 2 },
          { source: "Chenildieu", target: "Champmathieu", value: 2 },
          { source: "Chenildieu", target: "Brevet", value: 2 },
          { source: "Chenildieu", target: "Valjean", value: 2 },
          { source: "Chenildieu", target: "Bamatabois", value: 1 },
          { source: "Cochepaille", target: "Judge", value: 2 },
          { source: "Cochepaille", target: "Champmathieu", value: 2 },
          { source: "Cochepaille", target: "Brevet", value: 2 },
          { source: "Cochepaille", target: "Chenildieu", value: 2 },
          { source: "Cochepaille", target: "Valjean", value: 2 },
          { source: "Cochepaille", target: "Bamatabois", value: 1 },
          { source: "Pontmercy", target: "Thenardier", value: 1 },
          { source: "Boulatruelle", target: "Thenardier", value: 1 },
          { source: "Eponine", target: "Mme.Thenardier", value: 2 },
          { source: "Eponine", target: "Thenardier", value: 3 },
          { source: "Anzelma", target: "Eponine", value: 2 },
          { source: "Anzelma", target: "Thenardier", value: 2 },
          { source: "Anzelma", target: "Mme.Thenardier", value: 1 },
          { source: "Woman2", target: "Valjean", value: 3 },
          { source: "Woman2", target: "Cosette", value: 1 },
          { source: "Woman2", target: "Javert", value: 1 },
          { source: "MotherInnocent", target: "Fauchelevent", value: 3 },
          { source: "MotherInnocent", target: "Valjean", value: 1 },
          { source: "Gribier", target: "Fauchelevent", value: 2 },
          { source: "Mme.Burgon", target: "Jondrette", value: 1 },
          { source: "Gavroche", target: "Mme.Burgon", value: 2 },
          { source: "Gavroche", target: "Thenardier", value: 1 },
          { source: "Gavroche", target: "Javert", value: 1 },
          { source: "Gavroche", target: "Valjean", value: 1 },
          { source: "Gillenormand", target: "Cosette", value: 3 },
          { source: "Gillenormand", target: "Valjean", value: 2 },
          { source: "Magnon", target: "Gillenormand", value: 1 },
          { source: "Magnon", target: "Mme.Thenardier", value: 1 },
          { source: "Mlle.Gillenormand", target: "Gillenormand", value: 9 },
          { source: "Mlle.Gillenormand", target: "Cosette", value: 2 },
          { source: "Mlle.Gillenormand", target: "Valjean", value: 2 },
          { source: "Mme.Pontmercy", target: "Mlle.Gillenormand", value: 1 },
          { source: "Mme.Pontmercy", target: "Pontmercy", value: 1 },
          { source: "Mlle.Vaubois", target: "Mlle.Gillenormand", value: 1 },
          { source: "Lt.Gillenormand", target: "Mlle.Gillenormand", value: 2 },
          { source: "Lt.Gillenormand", target: "Gillenormand", value: 1 },
          { source: "Lt.Gillenormand", target: "Cosette", value: 1 },
          { source: "Marius", target: "Mlle.Gillenormand", value: 6 },
          { source: "Marius", target: "Gillenormand", value: 12 },
          { source: "Marius", target: "Pontmercy", value: 1 },
          { source: "Marius", target: "Lt.Gillenormand", value: 1 },
          { source: "Marius", target: "Cosette", value: 21 },
          { source: "Marius", target: "Valjean", value: 19 },
          { source: "Marius", target: "Tholomyes", value: 1 },
          { source: "Marius", target: "Thenardier", value: 2 },
          { source: "Marius", target: "Eponine", value: 5 },
          { source: "Marius", target: "Gavroche", value: 4 },
          { source: "BaronessT", target: "Gillenormand", value: 1 },
          { source: "BaronessT", target: "Marius", value: 1 },
          { source: "Mabeuf", target: "Marius", value: 1 },
          { source: "Mabeuf", target: "Eponine", value: 1 },
          { source: "Mabeuf", target: "Gavroche", value: 1 },
          { source: "Enjolras", target: "Marius", value: 7 },
          { source: "Enjolras", target: "Gavroche", value: 7 },
          { source: "Enjolras", target: "Javert", value: 6 },
          { source: "Enjolras", target: "Mabeuf", value: 1 },
          { source: "Enjolras", target: "Valjean", value: 4 },
          { source: "Combeferre", target: "Enjolras", value: 15 },
          { source: "Combeferre", target: "Marius", value: 5 },
          { source: "Combeferre", target: "Gavroche", value: 6 },
          { source: "Combeferre", target: "Mabeuf", value: 2 },
          { source: "Prouvaire", target: "Gavroche", value: 1 },
          { source: "Prouvaire", target: "Enjolras", value: 4 },
          { source: "Prouvaire", target: "Combeferre", value: 2 },
          { source: "Feuilly", target: "Gavroche", value: 2 },
          { source: "Feuilly", target: "Enjolras", value: 6 },
          { source: "Feuilly", target: "Prouvaire", value: 2 },
          { source: "Feuilly", target: "Combeferre", value: 5 },
          { source: "Feuilly", target: "Mabeuf", value: 1 },
          { source: "Feuilly", target: "Marius", value: 1 },
          { source: "Courfeyrac", target: "Marius", value: 9 },
          { source: "Courfeyrac", target: "Enjolras", value: 17 },
          { source: "Courfeyrac", target: "Combeferre", value: 13 },
          { source: "Courfeyrac", target: "Gavroche", value: 7 },
          { source: "Courfeyrac", target: "Mabeuf", value: 2 },
          { source: "Courfeyrac", target: "Eponine", value: 1 },
          { source: "Courfeyrac", target: "Feuilly", value: 6 },
          { source: "Courfeyrac", target: "Prouvaire", value: 3 },
          { source: "Bahorel", target: "Combeferre", value: 5 },
          { source: "Bahorel", target: "Gavroche", value: 5 },
          { source: "Bahorel", target: "Courfeyrac", value: 6 },
          { source: "Bahorel", target: "Mabeuf", value: 2 },
          { source: "Bahorel", target: "Enjolras", value: 4 },
          { source: "Bahorel", target: "Feuilly", value: 3 },
          { source: "Bahorel", target: "Prouvaire", value: 2 },
          { source: "Bahorel", target: "Marius", value: 1 },
          { source: "Bossuet", target: "Marius", value: 5 },
          { source: "Bossuet", target: "Courfeyrac", value: 12 },
          { source: "Bossuet", target: "Gavroche", value: 5 },
          { source: "Bossuet", target: "Bahorel", value: 4 },
          { source: "Bossuet", target: "Enjolras", value: 10 },
          { source: "Bossuet", target: "Feuilly", value: 6 },
          { source: "Bossuet", target: "Prouvaire", value: 2 },
          { source: "Bossuet", target: "Combeferre", value: 9 },
          { source: "Bossuet", target: "Mabeuf", value: 1 },
          { source: "Bossuet", target: "Valjean", value: 1 },
          { source: "Joly", target: "Bahorel", value: 5 },
          { source: "Joly", target: "Bossuet", value: 7 },
          { source: "Joly", target: "Gavroche", value: 3 },
          { source: "Joly", target: "Courfeyrac", value: 5 },
          { source: "Joly", target: "Enjolras", value: 5 },
          { source: "Joly", target: "Feuilly", value: 5 },
          { source: "Joly", target: "Prouvaire", value: 2 },
          { source: "Joly", target: "Combeferre", value: 5 },
          { source: "Joly", target: "Mabeuf", value: 1 },
          { source: "Joly", target: "Marius", value: 2 },
          { source: "Grantaire", target: "Bossuet", value: 3 },
          { source: "Grantaire", target: "Enjolras", value: 3 },
          { source: "Grantaire", target: "Combeferre", value: 1 },
          { source: "Grantaire", target: "Courfeyrac", value: 2 },
          { source: "Grantaire", target: "Joly", value: 2 },
          { source: "Grantaire", target: "Gavroche", value: 1 },
          { source: "Grantaire", target: "Bahorel", value: 1 },
          { source: "Grantaire", target: "Feuilly", value: 1 },
          { source: "Grantaire", target: "Prouvaire", value: 1 },
          { source: "MotherPlutarch", target: "Mabeuf", value: 3 },
          { source: "Gueulemer", target: "Thenardier", value: 5 },
          { source: "Gueulemer", target: "Valjean", value: 1 },
          { source: "Gueulemer", target: "Mme.Thenardier", value: 1 },
          { source: "Gueulemer", target: "Javert", value: 1 },
          { source: "Gueulemer", target: "Gavroche", value: 1 },
          { source: "Gueulemer", target: "Eponine", value: 1 },
          { source: "Babet", target: "Thenardier", value: 6 },
          { source: "Babet", target: "Gueulemer", value: 6 },
          { source: "Babet", target: "Valjean", value: 1 },
          { source: "Babet", target: "Mme.Thenardier", value: 1 },
          { source: "Babet", target: "Javert", value: 2 },
          { source: "Babet", target: "Gavroche", value: 1 },
          { source: "Babet", target: "Eponine", value: 1 },
          { source: "Claquesous", target: "Thenardier", value: 4 },
          { source: "Claquesous", target: "Babet", value: 4 },
          { source: "Claquesous", target: "Gueulemer", value: 4 },
          { source: "Claquesous", target: "Valjean", value: 1 },
          { source: "Claquesous", target: "Mme.Thenardier", value: 1 },
          { source: "Claquesous", target: "Javert", value: 1 },
          { source: "Claquesous", target: "Eponine", value: 1 },
          { source: "Claquesous", target: "Enjolras", value: 1 },
          { source: "Montparnasse", target: "Javert", value: 1 },
          { source: "Montparnasse", target: "Babet", value: 2 },
          { source: "Montparnasse", target: "Gueulemer", value: 2 },
          { source: "Montparnasse", target: "Claquesous", value: 2 },
          { source: "Montparnasse", target: "Valjean", value: 1 },
          { source: "Montparnasse", target: "Gavroche", value: 1 },
          { source: "Montparnasse", target: "Eponine", value: 1 },
          { source: "Montparnasse", target: "Thenardier", value: 1 },
          { source: "Toussaint", target: "Cosette", value: 2 },
          { source: "Toussaint", target: "Javert", value: 1 },
          { source: "Toussaint", target: "Valjean", value: 1 },
          { source: "Child1", target: "Gavroche", value: 2 },
          { source: "Child2", target: "Gavroche", value: 2 },
          { source: "Child2", target: "Child1", value: 3 },
          { source: "Brujon", target: "Babet", value: 3 },
          { source: "Brujon", target: "Gueulemer", value: 3 },
          { source: "Brujon", target: "Thenardier", value: 3 },
          { source: "Brujon", target: "Gavroche", value: 1 },
          { source: "Brujon", target: "Eponine", value: 1 },
          { source: "Brujon", target: "Claquesous", value: 1 },
          { source: "Brujon", target: "Montparnasse", value: 1 },
          { source: "Mme.Hucheloup", target: "Bossuet", value: 1 },
          { source: "Mme.Hucheloup", target: "Joly", value: 1 },
          { source: "Mme.Hucheloup", target: "Grantaire", value: 1 },
          { source: "Mme.Hucheloup", target: "Bahorel", value: 1 },
          { source: "Mme.Hucheloup", target: "Courfeyrac", value: 1 },
          { source: "Mme.Hucheloup", target: "Gavroche", value: 1 },
          { source: "Mme.Hucheloup", target: "Enjolras", value: 1 },
        ],
      },
    };
  },
  computed: {
    list(){
      return this.figureList.filter((item) => {
          return item.indexOf(this.keyword) !== -1;
      })
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.box_relative {
  position: relative;
  top: -10px;
}
.search-box {
  text-align: center;
  margin-top: 10px;
}
.search {
  width: 300px;
}
.small-pic-item {
  background-size: cover !important;
  background-position: 50%;
  background-repeat: no-repeat;

  border-style: solid;
  border-width: 1px;
  border-color: silver;
  border-radius: 0.25rem;

  padding-top: 62.5%;
}
.hover-small-pic-item:hover {
  border-color: gray;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
.listing-grid {
  display: grid;
  grid-gap: 1.75em;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 1em;
  margin-left: 5em;
  margin-right: 5em;
  margin-bottom: 70px!important;
}
.subtitle-pic-item {
  padding-bottom: 2px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: #1c1c1c;
}
.hover-subtitle-pic-item:hover {
  color: #008bc7;
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  clear: both;
  /* line-height: 36px; */
  text-align: center;
  color: #b6b6b6;
  background-color: #eff4fa;
  border-top: 1px solid #d6dfea;
}

</style>
